<template>
  <el-form ref="form" label-position="right" :model="currentRow" label-suffix="："
           label-width="140px">

    <div class="geology-children-fanghu">
      边坡支护措施
    </div>
    <div class="fanghu_form_item_view">
      <el-form-item label="坡面防护">
        <el-checkbox-group size="medium" v-model="currentRow.slopeProtectList">
          <el-checkbox-button v-for="item in EnumSlopeProtectList" :key="item.code" :label="item.code">{{item.name}}
          </el-checkbox-button>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="其他坡面防护" v-if="currentRow.slopeProtectList.indexOf(23) !== -1">
        <el-input v-model="currentRow.slopeProtectRemark" clearable placeholder="请描述其他坡面防护"></el-input>
      </el-form-item>
      <el-form-item label="支挡措施">
        <el-checkbox-group size="medium" v-model="currentRow.protectionTypeList">
          <el-checkbox-button v-for="item in EnumProtectionTypeNewList" :key="item.code" :label="item.code">{{item.name}}
          </el-checkbox-button>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="其他支挡措施" v-if="currentRow.protectionTypeList.indexOf(23) !== -1">
        <el-input v-model="currentRow.protectionTypeRemark" clearable placeholder="请描述其他支挡措施"></el-input>
      </el-form-item>
      <!-- 路堤边坡-->
      <div v-if="currentRow.hasRiver === 1">
        <el-form-item label="沿河防护">
          <el-checkbox-group size="medium" v-model="currentRow.riverProtectList">
            <el-checkbox-button v-for="item in EnumRiverProtectList" :key="item.code" :label="item.code">{{item.name}}
            </el-checkbox-button>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="其他沿河防护" v-if="currentRow.riverProtectList.indexOf(23) !== -1">
          <el-input v-model="currentRow.riverProtecttRemark" clearable placeholder="请描述其他沿河防护"></el-input>
        </el-form-item>
      </div>
      <div class="geology-children">
        支护信息
        <el-button size="mini" type="primary" @click="addProtectionDetail" icon="el-icon-circle-plus-outline">添加
        </el-button>
      </div>

      <div class="add-tab">
        <el-table border :data="currentRow.protectionDetailList" class="m-t-24">
          <el-table-column label="级数" width="130">
            <template slot-scope="scope">
              <el-form-item :prop="`protectionDetailList.${scope.$index}.level`" label-width="0px">
                <el-input size="small" v-model="scope.row.level" type="number" placeholder="" :maxlength="2"
                          style="width:100%">
                  <template slot="prepend"><span style="font-size: 15px">第</span></template>
                  <template slot="append"><span style="font-size: 15px">级</span></template>
                </el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="平台宽度" width="130">
            <template slot-scope="scope">
              <el-form-item :prop="`protectionDetailList.${scope.$index}.width`" label-width="0px">
                <el-input size="small" v-model="scope.row.width" placeholder="数字" :maxlength="2"
                          style="width:100%">
                  <template slot="append"><span style="font-size: 15px">m</span></template>
                </el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="坡高" width="130">
            <template slot-scope="scope">
              <el-form-item :prop="`protectionDetailList.${scope.$index}.height`" label-width="0px">
                <el-input size="small" v-model="scope.row.height" placeholder="数字" :maxlength="2"
                          style="width:100%">
                  <template slot="append"><span style="font-size: 15px">m</span></template>
                </el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="坡率" width="130">
            <template slot-scope="scope">
              <el-form-item :prop="`protectionDetailList.${scope.$index}.gradient`" label-width="0px">
                <el-input size="small" v-model="scope.row.gradient" placeholder="1:N"
                          style="width:100%">
                </el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="支护措施" min-width="200">
            <template slot-scope="scope">
              <el-form-item label-width="0px" :prop="`protectionDetailList.${scope.$index}.dept`">
                <el-select size="small" v-model="scope.row.dept" clearable placeholder="请选择">
                  <el-option
                    v-for="item in protectionList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code">
                  </el-option>
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="备注" width="150">
            <template slot-scope="scope">
              <el-form-item :prop="`protectionDetailList.${scope.$index}.remark`" label-width="0px">
                <el-input size="small" v-model="scope.row.remark" placeholder="请输入" :maxlength="20"
                          style="width:100%"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="70">
            <template slot-scope="scope">
              <el-button type="text" style="color:red" @click="handleDeleteProtectionDetail(scope.$index)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="geology-children-fanghu">
        地表排水设施
      </div>
      <el-form-item label="排水设施">
        <el-checkbox-group size="medium" v-model="currentRow.waterDrainStepList">
          <el-checkbox border v-for="item in EnumWaterDrainStepList" :key="item.code" :label="item.code">{{item.name}}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="其他类型"
                    v-if="currentRow.waterDrainStepList && currentRow.waterDrainStepList.indexOf(5) !== -1">
        <el-input v-model="currentRow.waterDrainStepRemark" clearable placeholder="请描述其他地表排水设施"></el-input>
      </el-form-item>

      <el-form-item label="排水情况">
        <el-radio-group v-model="currentRow.waterDrainStatus">
          <el-radio-button v-for="item in EnumWaterDrainStatusList" :key="item.code" :label="item.code">{{item.name}}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <div class="geology-children-fanghu">
        地下排水设施
      </div>
      <el-form-item label="排水设施">
        <el-checkbox-group size="medium" v-model="currentRow.groundwaterDrainStepList">
          <el-checkbox border v-for="item in EnumGroundwaterDrainStepNewList" :key="item.code" :label="item.code">
            {{item.name}}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="其他类型"
                    v-if="currentRow.groundwaterDrainStepList && currentRow.groundwaterDrainStepList.indexOf(6) !== -1">
        <el-input v-model="currentRow.groundwaterDrainStepRemark" clearable placeholder="请描述其他地下排水设施"></el-input>
      </el-form-item>

      <el-form-item label="排水情况">
        <el-radio-group v-model="currentRow.groundwaterDrainStatus">
          <el-radio-button v-for="item in EnumGroundwaterDrainStatusList" :key="item.code" :label="item.code">
            {{item.name}}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
    </div>
  </el-form>
</template>
<script>

import ItemMixins from "./item.mixins";
import Enums from '@/utils/enums'

export default {
  props: ['value', 'isLook'],
  mixins: [ItemMixins,Enums],

  data() {
    return {
      EnumDiBiaoShuiTiList: [],
      EnumGroundwaterInfoList: [],
      EnumZhiBeiFaYuList: [],
      EnumBuLiangDiZhiList: [],
      EnumConstructionList: [],
      EnumRockHardList: [],
      EnumJieGouMianList: [],
      EnumSysBooleanList: [],
      EnumSlopeProtectList: [],
      EnumRiverProtectList: [],
      EnumProtectionTypeNewList: [],
      EnumWaterDrainStepList: [],
      EnumGroundwaterDrainStepNewList: [],
      waterDrainStatusList: [],
      EnumGroundwaterDrainStatusList: [],
      EnumWaterDrainStatusList: [],
    }
  },
  computed: {
    protectionList() {
      let protectionList = []
      this.currentRow.protectionTypeList.map(x => {
        this.EnumProtectionTypeNewList.map(y => {
          //无和其他不添加
          if (x === y.code && y.code !== 0 && y.code !== 23) {
            protectionList.push(y)
          }
        })
      })
      //无和其他不添加
      this.currentRow.riverProtectList.map(x => {
        this.EnumRiverProtectList.map(y => {
          if (x === y.code && y.code !== 0 && y.code !== 23) {
            protectionList.push(y)
          }
        })
      })
      //无和其他不添加
      this.currentRow.slopeProtectList.map(x => {
        this.EnumSlopeProtectList.map(y => {
          if (x === y.code && y.code !== 0 && y.code !== 23) {
            protectionList.push(y)
          }
        })
      })
      //去重
      let result = [];
      let obj = {};
      for (let i = 0; i < protectionList.length; i++) {
        if (!obj[protectionList[i].code]) {
          result.push(protectionList[i]);
          obj[protectionList[i].code] = true;
        }
      }
      return result
    },
    currentRow: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    }
  },
  methods: {

    cleanData(type) {
      if (type === 4) {
        this.currentRow.structure = ''
        this.currentRow.structureSide = ''
        this.currentRow.hasRiver = 0
      } else {
        this.currentRow.hasRiver = ''
        this.currentRow.riverType = ''
      }

    },
    // 内部表单校验
    _validatorForm() {
      return new Promise((resolve) => {
        this.$refs.form.validate((valid) => {
          valid && resolve()
        })
      })
    }
  },
  mounted() {
    this.queryDictList(['EnumWaterDrainStatus', 'EnumGroundwaterDrainStatus', 'EnumGroundwaterDrainStepNew', 'EnumWaterDrainStep', 'EnumProtectionType', 'EnumRiverProtect', 'EnumSlopeProtect', 'EnumDiBiaoShuiTi', 'EnumGroundwaterInfo', 'EnumZhiBeiFaYu', 'EnumBuLiangDiZhi', 'EnumConstruction', 'EnumRockHard', 'EnumJieGouMian', 'EnumSysBoolean'],
      ['EnumWaterDrainStatusList', 'EnumGroundwaterDrainStatusList', 'EnumGroundwaterDrainStepNewList', 'EnumWaterDrainStepList', 'EnumProtectionTypeNewList', 'EnumRiverProtectList', 'EnumSlopeProtectList', 'EnumDiBiaoShuiTiList', 'EnumGroundwaterInfoList', 'EnumZhiBeiFaYuList', 'EnumBuLiangDiZhiList', 'EnumConstructionList', 'EnumRockHardList', 'EnumJieGouMianList', 'EnumSysBooleanList']);
  }
}
</script>

<style lang="less" scoped>


  // 修改table
  /deep/ .el-table__row {
    background: white !important;
  }

  /deep/ .el-table .el-table__body tr.current-row > td {
    background-color: #1990FE !important;
  }

  /deep/ .el-table .el-table__body tr:hover > td {
    background-color: #1990FE !important;
  }

  .form_compact {
    display: flex;

    & /deep/ .el-input input {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    & /deep/ .el-button {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .el-button {
    padding-right: 40px;
  }

  .el-form-item__label {
    /*padding: 0px;*/
  }

  input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
  }

  .geology {
    font-size: 20px;
    border-bottom: 1px solid;
    margin-bottom: 20px;
    margin-top: 20px;

  }

  .geology-children {
    font-size: 15px;
    border-bottom: 1px solid;
    margin-bottom: 20px;
    margin-top: 20px;
    margin-left: 20px;
  }

  .geology-children-fanghu {
    font-size: 15px;
    border-bottom: 1px solid;
    margin-bottom: 10px;
    margin-top: 10px;
    color: #1990FE;
    font-weight: 600;
  }

  .delete_button {
    color: #ff4d51;
  }

  /deep/ .el-checkbox-button.is-checked .el-checkbox-button__inner {
    background-color: #1990FE;
    border-color: #1990FE
  }

  /deep/ .el-checkbox.is-bordered.is-checked {
    border-color: #1990FE;
  }

  /deep/ .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #1990FE;
    border-color: #1990FE
  }
  /deep/ .el-checkbox__input.is-checked + .el-checkbox__label{
    color: #1990FE;
  }

  .fanghu_form_item_view {

    .el-form-item {
      margin-bottom: 5px;
    }

    .el-table td, .el-table th {
      padding: 3px 0;
      font-size: 13px;
    }
  }

  .add-tab {
    /deep/ .el-input-group__append {
      padding: 0 2px;
    }

    /deep/ .el-input-group__prepend {
      padding: 0 2px;
    }
  }

</style>
